<template>
	<div class="pwd_box">
		<div class="header">
			<div class="title">密码管理</div>
			<div class="edit">
				<el-input
					v-model="search_str"
					placeholder="请输入关键字..."
					class="search-input">
					<template #append>
						<el-icon @click="search"><Search /></el-icon>
					</template>
				</el-input>
				<el-button
					type="primary"
					:icon="Plus"
					circle
					@click="add" />
			</div>
		</div>
		<el-scrollbar
			class="scrollbar"
			wrap-class="pwd_box_scroll_wrap">
			<crad
				class="pwd_card"
				v-for="i in pwd_list"
				:data="i"
				:key="i.id"
				@edit_pwd="edit_pwd"
				@delete_pwd="delete_pwd"></crad>
		</el-scrollbar>
		<el-backtop
			target=".pwd_box_scroll_wrap"
			:right="20"
			:bottom="20" />
		<my_login></my_login>
		<my_dialog
			title="新建管理"
			:dialog="dialog"
			width="600"
			@sure="dialog_sure"
			@close="dialog_close">
			<el-form
				v-model="form"
				label-width="auto"
				label-position="right">
				<el-form-item label="管理器标题">
					<el-input v-model="form.title" />
				</el-form-item>
				<el-form-item label="管理器网站网址">
					<el-input v-model="form.url" />
				</el-form-item>
				<el-form-item label="用户名/账号">
					<el-input v-model="form.name" />
				</el-form-item>
				<el-form-item label="密码">
					<el-input
						v-model="form.pwd"
						type="password">
					</el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.remark" />
				</el-form-item>
			</el-form>
		</my_dialog>
	</div>
</template>

<script setup>
	import { onBeforeMount, ref } from "vue";
	import crad from "@/components/crad/pwd_index.vue";
	import { Search, Plus } from "@element-plus/icons-vue";
	import my_login from "@/components/my_login/index.vue";
	import my_dialog from "@/components/my_dialog/index.vue";
	import service from "@/data_base/service/main.js";
	import { encrypt, getData, decrypt } from "@/utils/encryption/index.js";
	import { my_message } from "@/utils/my_message/index.js";

	const msg = my_message();

	const search_str = ref("");
	const dialog = ref(false);
	const form = ref({
		title: "",
		url: "",
		name: "",
		pwd: "",
		remark: "",
	});
	const pwd_list = ref([]);
	// 添加操作为true，编辑为false
	const flag = ref(true);
	const find_data = ref({});

	onBeforeMount(async () => {
		let res = await service.pwd.get_pwd_all();
		if (res.code === 200) {
			pwd_list.value = res.data;
		}
	});

	const search = async () => {
		if (search_str.value) {
			let res = await service.pwd.fuzzy_query_pwds(search_str.value);
			if (res.code === 200 && res.data.length > 0) {
				pwd_list.value = res.data;
			}
		} else {
			let res = await service.pwd.get_pwd_all();
			if (res.code === 200) {
				pwd_list.value = res.data;
			}
		}
	};
	const add = () => {
		dialog.value = true;
		flag.value = true;
	};
	const dialog_sure = async () => {
		if (flag.value) {
			// 添加
			if (!form.value.title || !form.value.name || !form.value.pwd) {
				msg.msg_warning("管理器标题、用户名/账号、密码不能为空！");
				return;
			}
			let key = getData(null, "key");
			const key_part = Buffer.from(key).subarray(0, 32);
			const iv_part = Buffer.from(key).subarray(32, 48);
			let encrypted_pwd = encrypt(form.value.pwd, key_part, iv_part).toString(
				"hex"
			);
			if (!encrypted_pwd) {
				msg.msg_warning("密码加密失败！请联系管理员！");
				return;
			}
			form.value.pwd = encrypted_pwd;
			let res = await service.pwd.add_pwd(form.value);
			if (res.code === 200) {
				pwd_list.value.push(res.data);
			} else {
				localStorage.setItem("pwd_list", JSON.stringify(form.value));
			}
		} else {
			// 编辑
			if (!form.value.title || !form.value.name) {
				msg.msg_warning("管理器标题、用户名/账号不能为空！");
				return;
			}
			const param = {};
			if (form.value.pwd) {
				let key = getData(null, "key");
				const key_part = Buffer.from(key).subarray(0, 32);
				const iv_part = Buffer.from(key).subarray(32, 48);
				let encrypted_pwd = encrypt(form.value.pwd, key_part, iv_part).toString(
					"hex"
				);
				if (!encrypted_pwd) {
					msg.msg_warning("密码加密失败！请联系管理员！");
					return;
				}
				form.value.pwd = encrypted_pwd;
				param.title = form.value.title;
				param.url = form.value.url;
				param.name = form.value.name;
				param.pwd = form.value.pwd;
				param.remark = form.value.remark;
			}else{
				param.title = form.value.title;
				param.url = form.value.url;
				param.name = form.value.name;
				param.remark = form.value.remark;
			}
			let res = await service.pwd.update_pwd_by_id(find_data.value.id,param);
			if (res.code === 200) {
				let index = pwd_list.value.findIndex(i => i.id === find_data.value.id);
				if (index !== -1) {
					pwd_list.value[index] = res.data;
				}
			}
		}
		dialog.value = false;
		form.value = {
			title: "",
			url: "",
			name: "",
			pwd: "",
			remark: "",
		};
	};
	const dialog_close = () => {
		dialog.value = false;
	};
	const edit_pwd = async id => {
		// 编辑密码
		find_data.value = pwd_list.value.find(i => i.id === id);
		if (find_data.value) {
			form.value.title = find_data.value.title;
			form.value.url = find_data.value.url;
			form.value.name = find_data.value.name;
			form.value.remark = find_data.value.remark;
		}
		dialog.value = true;
		flag.value = false;
	};
	const delete_pwd = async id => {
		// 删除密码
		let res = await service.pwd.delete_pwd_by_id(id);
		if (res.code === 200) {
			let index = pwd_list.value.findIndex(i => i.id === id);
			if (index !== -1) {
				pwd_list.value.splice(index, 1);
			}
		}
	};
</script>
<style lang="less" scoped>
	.pwd_box {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		position: relative;
		.header {
			--header-height: 60px;
			width: 100%;
			height: var(--header-height);
			flex-shrink: 1;
			background-color: rgb(255, 255, 255);
			display: flex;
			align-items: center;
			box-sizing: border-box;
			border-bottom: var(--split-line);
			padding: 0 30px;
			.title {
				height: var(--header-height);
				line-height: var(--header-height);
				font-size: 24px;
				font-weight: 700;
			}
			.edit {
				height: var(--header-height);
				margin-left: auto;
				display: flex;
				align-items: center;
				.search-input {
					width: 300px;
					margin-right: 30px;
				}
			}
		}
		.scrollbar {
			flex: 1;
			margin-bottom: 20px;
			.pwd_card {
				margin-top: 20px;
			}
		}
	}
</style>
